<template>
    <div class="container-xl" v-if="getuser">
        <div class="row  mb-4 mt-4">
            <div class="col bg-image">
                <!-- <div class="my-integral">我的加油记录</div> -->
            </div>
        </div>
        <div class="row">
            <div :style="{ width: '240px' }">
                <div class="my-home-div">
                    <div :style="{ minHeight: '343px', paddingBottom: '12px' }">
                        <div class="row my-home-div-line">
                            <div class="col"> <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-a-GasPump"></use>
                                </svg> 加油记录</div>
                        </div>
                        <div class="m-p-3  m-0">
                            <div class="mt-1 mb-1" v-for="v in wardalluser" :style="{ marginLeft: '6px' }">
                                <div>
                                    <router-link :to="`/user?userid=${v.userid}`" v-slot="{ href }">
                                        <el-link target="_blank" :underline="false" :href="href">
                                            {{ v.user?.name }}花费{{ v.integral }}金币
                                        </el-link>
                                    </router-link>
                                </div>
                                <div>
                                    兑换加油包：<span class="text-primary cu" @click="dialogVisiblesubmit(v.integralreward)">{{
                                        v.integralreward?.name }}</span>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="my-home-div">
                    <div :style="{ minHeight: '343px', paddingBottom: '12px' }">
                        <div class="row my-home-div-line">
                            <div class="col"> <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-icon_gift" />
                                </svg> 我的加油记录</div>
                        </div>
                        <div class="m-p-3  m-0">
                            <div class="mt-1 mb-1" v-for="v in warduser" :style="{ marginLeft: '6px' }">
                                <div>
                                    <router-link :to="`/user?userid=${v.userid}`" v-slot="{ href }">
                                        <el-link target="_blank" :underline="false" :href="href">
                                            {{ v.user?.name }}花费{{ v.integral }}金币
                                        </el-link>
                                    </router-link>
                                </div>
                                <div class="text-duihuan">
                                    兑换加油包：<span class="text-primary cu" @click="dialogVisiblesubmit(v.integralreward)">{{
                                        v.integralreward?.name }}</span>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="my-home-div">
                    <div class="bgimage" :style="{ minHeight: 'calc(100vh - 380px)', paddingBottom: '12px' }">
                        <div class="row my-home-div-line">
                            <div :style="{ width: '200px' }"> <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-icon_wealth" />
                                </svg> 金币兑换
                            </div>
                            <div class="col text-right">
                                <span class="text-sm">金币兑换会消耗对应金币数量，题目练习、题目贡献、参加比赛都可以获得金币哦</span>
                            </div>
                        </div>
                        <div class="m-p-3 m-0 row ">
                            <el-card class="cu el-card__body m-1" v-for="v in integralreward"
                                @click="dialogVisiblesubmit(v)">
                                <img :src="v.image" class="image " />
                                <div class="p-2 p-2-body">
                                    <el-row class="el-card__body_info">
                                        <el-col :span="18">
                                            <div class="el-card__body_text mt-1 mb-1">{{ v.name }}</div>
                                        </el-col>
                                        <el-col :span="6" class="text-center">
                                            <div>
                                                <img width="20" height="20"
                                                    src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/icon_jinbi.png">
                                                <span class="font-bold">{{ v.integral }}</span>
                                            </div>
                                            <div>
                                                <span class="default-primary" type="primary">兑换</span>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-card>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog v-model="dialogVisible" :title="`金币兑换：${dialogVisibledata?.name}`" class="my-el-overlay-dialog"
            width="640px">
            <div class="mt-1 mb-1" v-html="dialogVisibledata?.context"></div>
            <div class="mt-1 mb-1">兑换消耗金币：
                <img width="20" height="20"
                    src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/icon_jinbi.png">
                <span class="text-bold">{{ dialogVisibledata?.integral }}</span>
            </div>
            <div>您当前的金币：
                <img width="20" height="20"
                    src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/icon_jinbi.png">
                <span > <span
                        class="text-bold ">{{ integral.find(e =>
                            e.type === '金币')?.nums }}</span> <span :class="Number(integral.find(e =>
                    e.type === '金币')?.nums) < Number(dialogVisibledata?.integral) ? 'color-2' : 'color-1'">{{ Number(integral.find(e =>
        e.type === '金币')?.nums) < Number(dialogVisibledata?.integral) ? '（当前金币不足）' : '' }}</span> </span>
            </div>

            <template #footer>

                <div class="dialog-footer">
                    <el-button size="default" @click="dialogVisible = false">关闭</el-button>
                    <el-button size="default" class="t-primary" type="primary" :disabled="disabled(dialogVisibledata)"
                        @click="submit(dialogVisibledata)">立即兑换</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { useStore } from 'vuex';
import { Storekey } from '../../../interface';
import { computed, onMounted, ref, watch } from 'vue';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import { asynccreateintegralrewarduser, asyncgetintegral, asyncgetintegralreward, asyncgetintegralrewarduser } from '../../../api';
import { ElMessage, ElMessageBox } from 'element-plus';

const dialogVisible = ref(false)
const dialogVisibledata = ref<Studycodemodel.Iintegralreward>()
const store = useStore(Storekey)
const getuser = computed(() => {
    return store.state.user
})
const warduser = ref<Studycodemodel.Iintegralrewarduser[]>([])
const wardalluser = ref<Studycodemodel.Iintegralrewarduser[]>([])
const integralreward = ref<Studycodemodel.Iintegralreward[]>([])
const my = ref(false)
onMounted(() => {
    start()
})

function dialogVisiblesubmit(v?: Studycodemodel.Iintegralreward) {
    dialogVisibledata.value = v
    dialogVisible.value = true
}

function disabled(data?: Studycodemodel.Iintegralreward) {
    if (!data) return true
    const { num, remainingquantity, ID, offshelf } = data
    if (!offshelf) return true
    if (Number(remainingquantity) < 1) {
        return true
    }
    const length = warduser.value.filter(c => c.integralrewardid === ID).length

    if (length > Number(num)) {
        return true
    }
    const useri = integral.value.find(e => e.type === '金币')?.nums || 0
    return Number(data.integral) > Number(useri)

}

const integral = ref<{
    nums: number;
    type: "比赛" | "题解贡献" | "测试点贡献" | "金币" | "练习" | undefined;
}[]>([])

async function start() {
    asyncgetintegral({ userid: getuser.value?.ID }).then(e => {
        integral.value = e
    })

    const _warduser = await asyncgetintegralrewarduser({ userid: getuser.value?.ID, _limit: 5 })
    warduser.value = _warduser.rows
    const _wardalluser = await asyncgetintegralrewarduser({ _limit: 5 })
    wardalluser.value = _wardalluser.rows
    const data = await asyncgetintegralreward({ offshelf: true })
    integralreward.value = data.rows
}

watch(() => getuser.value?.ID, e => {
    start()
})

async function submit(data?: Studycodemodel.Iintegralreward) {
    if (!data) return
    ElMessageBox.confirm("确定要兑换吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
    })
        .then(async () => {
            try {
                await asynccreateintegralrewarduser({ integral: data.integral, integralrewardid: data.ID })
                start()
                ElMessage({
                    message: "兑换成功",
                    type: "success",
                });
                dialogVisible.value = false
            } catch (e) {
                ElMessage({
                    message: String(e),
                    type: "error",
                });
            }
        })
        .catch(() => {

        });
}

</script>

<style scoped>
.bg-white {
    padding-top: 35px;
    padding-bottom: 50px;
}

.bg-image {
    background-image: url(https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/banner_xuexijiayouzhan.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 240px;
    position: relative;
}

.my-integral {
    width: 144px;
    height: 32px;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex: none;
    order: 0;
    flex-grow: 0;
    background: linear-gradient(96.28deg, #FF8461 0%, #FFAD61 99.26%);
    box-shadow: 4px 4px 20px rgba(252, 169, 62, 0.25);
    border-radius: 20px;
    position: absolute;
    left: 58px;
    top: 184px;
    text-align: center;
    cursor: pointer;
}

.el-card__body {
    width: 260px;
    --el-card-padding: 0;
    /* --el-card-border-color: rgba(0, 0, 0, 0.06); */
    /* --el-box-shadow-light: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13); */
    position: relative;
}

.image {
    height: 300px;
    object-fit: cover;
    width: 100%;
}

.el-card__body_text {
    font-family: 'Microsoft YaHei';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #222222;
    height: 45px;
    overflow: hidden;
}

.p-2-body {
    position: absolute;
    bottom: 0;
    background-color: rgba(255, 255, 255, .70);
}

.el-card__body_info {
    font-weight: bold;
}

.default-primary {
    width: 45px;
    height: 20px;
    display: inline-block;
    background: linear-gradient(104.04deg, #E0653F 0%, rgba(255, 153, 0, 0.75) 100%);
    box-shadow: 4px 4px 10px rgba(252, 169, 62, 0.25);
    border-radius: 2px;
    font-size: 12px;
    color: #fff;
    font-weight: 400;
    text-align: center;
    line-height: 18px;
    margin-left: 10px;
}

.text-sm {
    font-family: 'Microsoft YaHei';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, .5);
}

.text-bold {
    font-weight: bold;
}

.color-1 {
    color: #FF8461;
}

.color-2 {
    color: #B82D2C;
}

.dialog-footer {
    text-align: center;
    padding-bottom: 10px;
}

.t-primary {
    background: linear-gradient(104.04deg, #E0653F 0%, rgba(255, 153, 0, 0.75) 100%);
    color: #fff;
}

.text-duihuan {
    width: 100%;
    overflow: hidden;
}

.bgimage {
    background-image: url(https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/08519c556004ac959134344fdccd720.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}
</style>

<style>
.my-el-overlay-dialog .el-dialog__body {
    border-top: 1px solid rgba(117, 117, 117, 0.4);
    padding: 30px;
}

.my-el-overlay-dialog .el-dialog__header {
    --el-dialog-padding-primary: 20px 12px;
    font-weight: 700;
}
</style>